<template>
  <div class="tree-select-view">
    <div class="tree-list">
      <div v-for="(item, index) in data" :key="item.id">
        <div class="tree-item">
          <!-- van-hairline--bottom -->

          <div class="open-close-btn" :class="item.isOpen? 'icon-open': 'icon-close'">
            <i v-if="!isLastLevel(item)" class="iconfont icon-zhedie" :class="[isFirstLevel(item) ? 'icon-wode-zhedie': 'icon-xieyixie_xialajiantou']" @click="toggle(item, index)"></i>
          </div>

          <div class="checked-view" @click="treeClick(item, index)">
            <div class="company-name" :class="'company-level-' + item.level">{{item.name}}</div>
            <div class="check-box">
              <i v-if="item.selected" style="color: #007AE6" class="iconfont icon-chat_register_rb_s"></i>
              <i v-else style="color: #CED1D6" class="iconfont icon-chat_register_rb_n"></i>
            </div>
          </div>

        </div>
        <div v-show="item.isOpen">
          <tree-select class="tree-child" @reRender="treeClick" :data="item.children" v-if="!isLastLevel(item)" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'TreeSelect',
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },

  methods: {
    /** 切换子节点 */
    toggle(item, index) {
      item.isOpen = !item.isOpen
      this.$emit('reRender', item, index, true)
    },

    /** 是否是一级 */
    isFirstLevel(item) {
      return item.parentId == 0
    },

    /** 是否是最后一级 */
    isLastLevel(item) {
      return !item.children
    },

    /** 选择当前节点 */
    treeClick(item, index) {
      this.$emit('reRender', item, index, false)
    },

    getCompanyLevel(item) {
      if (this.isFirstLevel(item)) {
        return '0'
      }
      return item.level
    }
  }
}
</script>

<style lang="less" scoped>
.tree-select-view {
  .tree-list {
    // margin-bottom: 40px;
    .tree-item {
      display: flex;
      align-items: center;
      // justify-content: space-between;
      height: 44px;
      color: rgba(19, 40, 77, 1);
      font-weight: 400;
      font-size: 16px;
      .open-close-btn {
        height: 16px;
        width: 16px;
        transition: transform 0.3s ease;
        transform-origin: center;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        top: -1px;
      }
      .open-close-btn.icon-close {
        transform: rotate(-90deg);
      }
      .company-name {
        flex: 1;
        margin-left: 8px;
        line-height: 24px;
      }
      .company-level-1 {
        font-weight: 600;
        font-size: 16px;
      }
      .company-level-2 {
        font-weight: 600;
        font-size: 14px;
      }
      .company-level-3 {
        font-size: 14px;
      }
      .check-box {
        i {
          font-size: 16px;
        }
      }
      .checked-view {
        flex: 1;
        display: flex;
        align-items: center;
      }

      .icon-zhedie {
        color: #9ca5b5;
        font-size: 14px;
      }
      .check-text {
        font-weight: 500;
        color: #007ae6;
      }
      .first-level {
        font-weight: 600;
      }
      .check-icon {
        width: 22px;
        height: 22px;
      }
    }
  }
  .tree-child {
    box-sizing: border-box;
    // padding-left: 24px;
  }
}
</style>